<template>
    <div>
        <div class="top-headbox">
            <div :class="['top-head',this.$store.state.black1==123?'':'black']">
                <div class="top-head-content">
                    <img src="../assets/indexImg/homeLogo.png" alt="">
                    <div class="ul-box">
                        <ul>
                            <li v-for="(item,index) in list"  @mouseover="changeIsshow(index)" @mouseout="deleteIsshow(index)" :key="index">
                                <a :href="linkList[index]" :class="[$store.state.isShow.indexOf(index)>-1?'active1':'']">
                                    {{item}}
                                </a>
                            <div class="background-img" v-show="$store.state.isShow.indexOf(index)>-1"></div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "top",
        props:{
            active:String,//传参显示与隐藏
            black1:String,//传参黑色背景
        },
        data(){
          return{
              list:["首页","产品","星火实验室","新闻中心","关于我们"],
              linkList:["/index","/product","/lab","/news","/myinfo"]
          }
        },
        methods:{
            //鼠标移入
            changeIsshow(index){
                this.$store.commit("changeIsshow",index)
            },
            //鼠标移出
            deleteIsshow(index){
                this.$store.commit("changeIsshow1",index)
            },
        },
        created() {
            this.$store.commit("changeIsshow",Number(this.active));
            this.$store.commit("changebBlack",Number(this.black1));
        },
        beforeDestroy() {
            this.$store.commit("changeIsshow1",Number(this.active))
        },
    }
</script>

<style scoped lang="less">
    .black{
        background-color: black!important;
    }
    .top-headbox {
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 10;
        .top-head{
            background-color: transparent;
        }
        .top-head-content{
            min-width: 1200px;
            display: flex;
            height: 75px;
            justify-content: space-around;
            align-items: center;
        }
        ul {
            li {
                position: relative;
                float: left;
                padding: 0 40px;
                color: #fff;
                font-size: 14px;
                cursor: pointer;
                transition: all .5s;
                a {
                    color: white;
                }
            }
            li>a:hover{
                color: #71cfff!important;
            }
            .active1{
                color: #71cfff!important;
            }
        }
    }
    .background-img{
        position: absolute;
        left: 10px;
        bottom: -15px;
        width: 62px;
        height: 15px;
        background-image: url("../assets/indexImg/nav_bg.png");
    }
</style>